<template>
  <div class="attachment-modal" @click.stop="false">
    <div class="file-list">
      <div
        class="file-item"
        v-for="(item,index) in fileList"
        :key="index"
      >
        <div class="img-box">
          <img src="@/assets/dashboard/searchResult/fileIcon/icon_xls.png" alt="" v-if="getFileType(item.fileName)==='xls'||getFileType(item.fileName)==='xlsx'||getFileType(item.fileName)==='csv'">
          <img src="@/assets/dashboard/searchResult/fileIcon/icon_doc.png" alt="" v-else-if="getFileType(item.fileName)==='doc'||getFileType(item.fileName)==='docx'">
          <img src="@/assets/dashboard/searchResult/fileIcon/icon_ppt.png" alt="" v-else-if="getFileType(item.fileName)==='ppt'||getFileType(item.fileName)==='pptx'">
          <img src="@/assets/dashboard/searchResult/fileIcon/icon_pdf.png" alt="" v-else-if="getFileType(item.fileName)==='pdf'">
          <img src="@/assets/dashboard/searchResult/fileIcon/icon_txt.png" alt="" v-else-if="getFileType(item.fileName)==='txt'">
          <img src="@/assets/dashboard/searchResult/fileIcon/icon_jpg.png" alt="" v-else-if="getFileType(item.fileName)==='jpg'||getFileType(item.fileName)==='png'||getFileType(item.fileName)==='pdf'">
          <img src="@/assets/dashboard/searchResult/fileIcon/icon_zip.png" alt="" v-else-if="getFileType(item.fileName)==='zip'||getFileType(item.fileName)==='rar'||getFileType(item.fileName)==='7z'">
          <img src="@/assets/dashboard/searchResult/fileIcon/icon_other.png" alt="" v-else>
        </div>
        <div class="middle">
          <div class="file-name">{{ item.fileName }}</div>
          <div class="file-size">{{ item.size }}<span class="unit">KB</span></div>
        </div>
        <div class="download-btn">下载</div>
      </div>
    </div>
    <div class="bottom-row">
      <div class="btn">
        <img src="@/assets/dashboard/myPending/download-white.png" alt="">
        <span>下载全部附件</span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {
  },
  name: "",
  props: {
    fileList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    //获取文件类型
    getFileType(fileName) {
      if(!fileName || typeof(fileName) !== 'string'){
        return ''
      }
      return fileName.split('.').pop()
    },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.attachment-modal {
  cursor: initial;
  position: absolute;
  top: 36px;
  right: 0;
  width: 384px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 3px 6px -4px rgba(0, 0, 0, 0.12),0px 9px 28px 8px rgba(0, 0, 0, 0.05);
  z-index: 100000;
  .file-list {
    width: 100%;
    max-height: 296px;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 16px;
    .file-item {
      width: 100%;
      height: 74px;
      box-sizing: border-box;
      border-bottom: 1px solid #f2f3f6;
      display: flex;
      align-items: center;
      &:last-child {
        border-bottom: none;
      }
      .img-box {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
        }
      }
      .middle {
        width: calc(100% - 110px);
        margin: 0 8px;
        .file-name {
          width: 100%;
          height: 22px;
          line-height: 22px;
          font-size: 14px;
          color: @textColor;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .file-size {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          .unit {
            margin-left: 4px;
          }
        }
      }
      .download-btn {
        width: 58px;
        height: 24px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid @ntalkColor;
        border-radius: 4px;
        color: @ntalkColor;
        background-color: #fff;
        cursor: pointer;
        &:hover {
          background-color: @ntalkColor;
          color: #fff;
        }
      }
    }
  }
  .bottom-row {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.08);
    .btn {
      width: 352px;
      height: 32px;
      background-color: #e67529;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      span {
        color: #fff;
        font-size: 14px;
        line-height: 22px;
        margin-left: 8px;
      }
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
}
</style>
